<template>
	<view class="disclose-details">
		<navBar title="人員考勤詳情" @goBack="navBack"></navBar>

		<template v-if="fillRecordDetails">
			<view class="title"></view>
			<view class="card">
				<view class="inline-item">
					<view class="label">WO/EO/Research No.</view>
					<view class="label-content">{{ fillRecordDetails.orderNo || ''}}</view>
				</view>

				<view class="inline-item">
					<view class="label">Project</view>
					<view class="label-content">{{fillRecordDetails.projectName || ''}}</view>
				</view>

				<view class="inline-item">
					<view class="label">Location</view>
					<view class="label-content no-overflow">
						{{ `${fillRecordDetails.lineName || ''}${fillRecordDetails.lineSiteSectionName || ''}`}}
					</view>
				</view>

				<view class="inline-item">
					<view class="label">工班類型</view>
					<view class="label-content">
						{{fillRecordDetails.shiftType || ''}}
					</view>
				</view>


				<view class="inline-item">
					<view class="label">施工開始時間</view>
					<view class="label-content">{{getDate2(fillRecordDetails.constructionStartDate) || ''}}</view>
				</view>

				<view class="inline-item">
					<view class="label">施工結束時間</view>
					<view class="label-content">{{getDate2(fillRecordDetails.constructionEndDate) || ''}}</view>
				</view>

				<view class="inline-item">
					<view class="label">Scaffolding</view>
					<view class="label-content">
						{{fillRecordDetails.scaffolding}}
					</view>
				</view>

				<view class="inline-item">
					<view class="label">Description</view>
					<view class="label-content">
						{{fillRecordDetails.description}}
					</view>
				</view>

				<view class="inline-item" style="border-bottom: none;">
					<view class="label">人員</view>
				</view>
				<view class="uni-container" style="padding-bottom: 20rpx;">
					<uni-table ref="table" border stripe emptyText="暂无更多数据" width="200">
						<uni-tr>
							<uni-th align="center" width="50">姓名</uni-th>
							<uni-th align="center" width="60">工人注冊證號</uni-th>
							<uni-th align="center" width="80">工種/職務</uni-th>
							<uni-th align="center" width="75">所屬單位</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in fillRecordDetails.hkAttendancePersonDownloads" :key="index">
							<uni-td align="center" width="50">{{ item.personName }}</uni-td>
							<uni-td align="center" width="60">{{ item.cardNo }}</uni-td>
							<uni-td align="center" width="80">{{ item.jobTitle }}</uni-td>
							<uni-td align="center" width="75">{{ item.affiliatedUnit }}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import mixins from "@/utils/mixins.js"
	import moment from '@/utils/moment.js'
	export default {
		mixins: [mixins],
		components:{
		},
		data() {
			return {
				// 填报记录详情
				fillRecordDetails: null,
				tableData: []
			}
		},
		computed: {
			...mapGetters(['dictMap'])
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('getDetailInfo', (data) => {
				console.log(data.data, '9999')
				if(!data.data.lineSiteSectionName) {
					data.data.lineSiteSectionName = ''
				}
				if(!data.data.lineName) {
					data.data.lineName = ''
				}
				this.fillRecordDetails = data.data
			})
			this.eventChannel = eventChannel
			console.log(moment().subtract(6, 'days').format('YYYY-MM-DD'))
		},
		methods: {
			navBack() {
				uni.navigateBack()
			},
			getName(arr, code) {
				let name = ''
				if (arr && arr.length > 0) {
					name = arr.find(it => it.code === code) ? arr.find(it => it.code === code).name : ''
				}
				return name
			},
		}
	}
</script>

<style scoped lang="scss">
	.disclose-details {
		// min-height: 100vh;
		background: #f5f7fa;
		font-size: 32upx;
		/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;

		/* #endif */
		.no-overflow {
			text-overflow: initial !important;
			white-space: initial !important;
			overflow: initial !important;
			line-height: initial !important;
		}

		.title {
			font-size: 36upx;
			color: #22204e;
			font-weight: 800;
			padding: 38upx 30upx 12upx;
			line-height: 50upx;
		}

		.card {
			background: #fff;
			padding: 10upx 32upx 0 28upx;
			font-weight: bold;

			.inline-item {
				line-height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #e2e5ed;
				margin-bottom: 10upx;

				&:last-of-type {
					border-bottom: none;
					margin-bottom: 0;
				}

				.label {
					color: #445469;
					flex-shrink: 0;
				}

				.label-content {
					max-width: 360upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding-right: 4upx;
				}
			}
		}
	}
</style>